<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap组件的添加</title>
    <!-- 引入Bootstrap的css样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .btn-primary {
            color: #fff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }
    </style>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
<br>
<br>
<br>
<div class="container">
    <!--    使用Bootstrap的按钮样式非常简单，只需要在button中引入对应的class即可-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default"> .but-default</button>
    <button class="btn btn-primary">.btn-primary</button>
    <button class="btn btn-success">.btn-success</button>
    <button class="btn btn-info">.btn-info</button>
    <button class="btn btn-warning">.btn-warning</button>
    <button class="btn btn-danger">.btn-danger</button>
    <button class="btn btn-link">.btn-link</button>
    <br/>
    <br/>
    <br/>
    <br/>
    <hr/>
    <!--    按钮的大小-->
    <button class="btn">普通按钮.btn</button>
    <button class="btn btn-default btn-lg">普通按钮.btn</button>
    <button class="btn btn-primary btn-sm">.btn-primary</button>
    <button class="btn btn-success btn-xs">.btn-success</button>
    <br>
    <br>
    <br>
    <button type="button" class="btn btn-primary btn-lg">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg active">默认状态</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">默认状态</button>
    <br/>
    <hr/>
    <a href="#" class="btn btn-primary btn-lg" role="button">默认状态</a>
    <a href="#" class="btn btn-primary btn-lg active" role="button">活动状态</a>
    <a href="#" class="btn btn-primary btn-xs disabled" role="button">禁用状态</a>
</div>
</body>
</html>